<template>
  <div class="wrapper">
    <!-- {{ localColumns[1]  }} -->
    <el-popover
      placement="top-start"
      title="选项"
      width="200"
      trigger="hover"
    >
      <el-button slot="reference">选择展示的列</el-button>
      <el-checkbox v-for="(item, index) in localColumns" v-model="item.isShow" :key="index">{{ item.attrs.label }}</el-checkbox>
    </el-popover>
    <el-table :data="store.data" style="width: 100%" v-bind="$attrs" v-on="$listeners" @selection-change="handleSelectionChange">
        <template v-for="(column, index) in localColumns">
            <component 
              v-if="column.isShow"
              :key="index"
              :is="column.type"
              v-bind="column.attrs"
            >
              <template v-if="column.children">
                <componet 
                  v-for="(child, index) in column.children"
                  :key="index"
                  :is="child.type"
                  ></componet>
              </template>
            </component>
        </template>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="100"
      @current-change="currentChange"
      >
    </el-pagination>
  </div>
</template>
<script>
import TabelEditorColumnComp from '@/components/Table/column/TabelEditorColumnComp.vue'

export default {
  name: 'DTable',
  props: ['store', 'columns'],
  provide(){
    return {
      'store': this.store,
      'editorIndex': this.editorIndex
    }
  },
  async created(){
    if(this.store && this.store.autoLoad){
      await this.store.loadData()
    }
  },
  mounted(){
    this.addNewProperty();
  },
  data(){
    return {
      editorIndex: [],
      localColumns: this.cloneData(this.columns)
    }
  },
  components: {
    TabelEditorColumnComp
  },
  methods:{
    // 选中功能 将选中的表格提交至后端
    handleSelectionChange(val){
    },
    currentChange(val){
      this.store.page = val
      this.store.pageSize = 10
      this.store.loadData()
    },
    // 深拷贝函数，用于复制 props 数据
    cloneData(data) {
      return _.cloneDeep(data);
    },
    // 给每个对象添加新属性的方法
    addNewProperty() {
      // 这样就不行 就会锁住 无法改变
      this.localColumns.forEach(item => {
        // 给每个对象添加新属性
        item.isShow2 = true;
        console.log(item);
        
      });
      console.log(this.localColumns, '123');
      
    }
  }
}
</script>
